<template>
	<a-modal title="查询用户抖音订单" :width="720" :visible="visible" @ok="handleOk" @cancel="hide" :centered="true"
		okText="搜索">
		<a-form>
			<a-form-item label="查询用户订单" style="display: flex">
				<div style="display: flex;align-items: center">
					<a-input v-model="num" placeholder="请填写用户手机号" style="margin-right: 20px;width: 500px"></a-input>
				</div>
			</a-form-item>
		</a-form>
		<a-table style="margin-bottom: 24px" row-key="id" :columns="columns" :dataSource="orderList"
			:pagination="false">
			 <span slot='action' slot-scope='text, record'>
			<a @click='handleVerify(record)'>核销</a>
			</span>
		</a-table>
	</a-modal>
</template>
<script>
	import {
		clothesDouyinShow
	} from "@/api/clothes";
	import notification from 'ant-design-vue/es/notification';
	const columns = [{
			title: '订单ID',
			dataIndex: 'order_id'
		},
		{
			title: '名称',
			dataIndex: 'name'
		},
		{
			title: '价格',
			dataIndex: 'price',
			customRender(text) {
				return '￥' + text
			}
		},
		{
		  title: '操作',
		  dataIndex: 'action',
		  width: '110px',
		  scopedSlots: { customRender: 'action' }
		}
	]
	export default {
		data() {
			return {
				visible: false,
				columns,
				orderList: [],
				num: '',
			}
		},
		methods: {
			show() {
				this.visible = true;
			},
			hide() {
				this.visible = false;
			},
			handleOk() {
				/*this.$router.push({
				  name: 'douyinList',
				  query: {
				    verify_id: 9.9,
				    price: 9.9,
				  }
				})*/
				const params = {
					mobile: this.num
				}
				clothesDouyinShow(params).then((res) => {
					// this.num = '';
					// this.hide();
					console.log(res)
					if(res.data.length <= 0){
						notification.error({
						  message: '提示',
						  description: '暂无订单',
						   duration: 2
						})
					}
					this.orderList = res.data;
					
				})
			},
			handleVerify(item){
				console.log(item)
				this.$router.push({
				  name: 'douyinList',
				  query: {
				    //verify_id: res.data.verify_id,
				    price: item.price,
				    encrypted_data: item.encrypted_data
				  }
				})
			}
		},
	}
</script>
<style scoped lang="less">
	/deep/ .ant-radio-group {
		width: 100%;
	}
</style>